<template>
        <div class='main'>
            <div class='err_left'>
                <div class='err_main'>
                    <div class='err_main_detail'>
                        <div style='width:100%;text-align:center;font-size:20px' v-if='showNoDate'>暂无数据</div>
                        <analysisDialog @close="closeAnalysisDialog" :isShowAnswer="false" :isShowAnalysis="true" v-if="analysisDialogVisible" :curQuestion="bugQuestion" ></analysisDialog>
                        <template v-for='(value,i) in newExamList'>
                            <div :key='i' v-if='value.data.length && value.type < 4'>
                                <p class="rs_t_remark">{{value.questionTypes}}（{{value.typesIntro}}）</p>
                                <div class="peter-question-wrap peter-small-question-wrap" :id="'anchor-'+item.type+'-'+index" v-for='(item,index) in value.data' :key='index' :tk-number="item.questionId" :tktype="item.type" :tknum="index+1">
                                    <div class="err_title">
                                        <span class="am-badge am-badge-secondary" style='float:left;margin-top:5px'>题目 {{index+1}}</span>
                                        <span v-html="item.title" style="display:inline-block;margin-left:10px;width:90%;"></span>
                                    </div>
                                    <div class="am-margin-vertical">
                                        <ul v-if="item.type == '0'">
                                            <li style="list-style:none;" v-for='(val,num) in item.options' :key='num' >
                                                <label class="radio">
                                                    <input type="radio" :name="'radio-'+item.questionId" @click='clickItemHandle(item.type,index,num,i)' :checked='val.check'>
                                                    <span style='display:block'>
                                                        <div style='display:inline-block;margin-left:8px;float:left;'>{{val.optionName}}、</div>
                                                        <p v-html="val.content" style="display:inline-block;float:right;margin:0;width:95%;"></p>
                                                    </span>
                                                </label>
                                            </li>
                                        </ul>
                                        <ul v-if="item.type == '1' || item.type == '2'">
                                            <li style="list-style:none;" v-for='(val,num) in item.options' :key="'val2'+num" >
                                                <label class="checkbox" >
                                                    <input type="checkbox" :name="'checkbox-'+item.questionId" @click='clickItemHandle(item.type,index,num,i)' :checked='val.check'>
                                                    <span style='display:block'>
                                                        <div style='display:inline-block;margin-left:8px;float:left;'>{{val.optionName}}、</div>
                                                        <p v-html="val.content" style="display:inline-block;margin:0;float:right;width:95%;"></p>
                                                    </span>
                                                </label>
                                            </li>
                                        </ul>
                                        <ul v-if="item.type == '3'">
                                            <li style="list-style:none;" v-for='(val,num) in item.options' :key='num' >
                                                <label class="radio">
                                                    <input type="radio" :name="'radio-'+item.questionId" @click='clickItemHandle(item.type,index,num,i)' :checked='val.check'>
                                                    <span>&nbsp;&nbsp;&nbsp;<p v-html="val.content" style="display:inline-block;margin:0;"></p></span>
                                                </label>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="am-text-right">
                                        <span @click='collectQuestion(item.type,index,item.questionId,i)' :id="'collectExam-'+item.questionId" class="collectExam am-badge am-radius" :data-number="item.questionId" style="cursor:pointer;margin-right:10px; background-color:#fff; color:#666;border:1px solid #ddd;font-weight:normal;">
                                            <span class="am-icon-star" v-if="item.isCollection">已收藏</span>
                                                <span class="am-icon-star-o" v-if="!item.isCollection"> 收藏</span>
                                        </span>
                                        <span v-if="page == 'chapter'" @click='feedbackBug(item)' class="bugMenu am-badge am-radius" :data-number="item.questionId" style="cursor:pointer;margin-right:10px; background-color:#fff; color:#666;border:1px solid #ddd;font-weight:normal;">BUG反馈</span>                        
                                        <span v-if="page == 'error'" @click='delError(item.type,index,item.questionId,i)' class="bugMenu am-badge am-radius" :data-number="item.questionId" style="cursor:pointer;margin-right:10px; background-color:#fff; color:#666;border:1px solid #ddd;font-weight:normal;">移除本题</span>                        
                                        <span @click='showAnswer(item.type,index,0,i)' class="look-result am-badge am-radius" style="cursor:pointer;margin-right:10px; background-color:#fff; color:#666;border:1px solid #ddd;font-weight:normal;">查看答案</span>
                                    </div>
                                    <blockquote :class="item.showAnswer?'err_parse':'err_parse_hidden'">
                                        答案：{{item.answer.join(',')}}<br>
                                        <br>解析：
                                        <p v-html='item.analysis'></p>
                                    </blockquote>
                                    <hr style="border-style: dashed">
                                </div>
                            </div>
                        </template>
                        <template v-for='(v,x) in newExamList'>
                            <div :key='x' v-if='v.data.length && v.type > 3'>
                                <p class="rs_t_remark">{{v.questionTypes}}（{{v.typesIntro}}）</p>
                                <div class="am-padding-left-lg" v-for='(item,index) in v.data' :key="'item'+item.type+index" :id="'anchor-'+item.type+'-'+index">
                                    <div class="rs_ex_material"><span class="am-badge am-badge-secondary">题目</span>（{{index+1}}）材料：
                                        <span v-html="item.title" style="display:inline-block;margin-left:10px;"></span>
                                    </div>
                                    <div class='rs-ex-analysis' v-for='(val,num) in item.children' :key='num' >
                                        <div class="rs_ex_title" style='overflow:hidden'>
                                            <span class="am-badge am-badge-secondary">要求 {{num+1}}</span> <p v-html="val.title" style="display:inline-block;margin:0;float:right;width:91%;"></p>
                                        </div>
                                        <span @click='showAnswer(item.type,index,num,x)' class="look-result am-badge am-radius look-result-right" style="cursor:pointer;margin-right:10px; background-color:#fff; color:#666;border:1px solid #ddd;font-weight:normal;">查看答案</span>
                                        <blockquote class="am-padding-left-xs" v-if='val.showAnswer'>名师解析：
                                            <p v-html='val.analysis'></p>
                                        </blockquote>
                                    </div>
                                    <div class="am-text-right">
                                        <span @click='collectQuestion(item.type,index,item.questionId,x)' :id="'collectExam-'+item.type+index" class="collectExam am-badge am-radius" :data-number="item.type+index" style="cursor:pointer;margin-right:10px; background-color:#fff; color:#666;border:1px solid #ddd;font-weight:normal;">
                                            <span class="am-icon-star" v-if="item.isCollection">已收藏</span>
                                            <span class="am-icon-star-o" v-if="!item.isCollection"> 收藏</span>
                                        </span>
                                        <!-- <span @click='makeQuestion(item.type,index,item.questionId,x)' :id="'makeExam-'+item.type+index" class="collectExam am-badge am-radius" :data-number="item.type+index" style="cursor:pointer;margin-right:10px; background-color:#fff; color:#666;border:1px solid #ddd;font-weight:normal;">
                                            <span class="am-icon-pencil-square" v-if="item.isMake">已做</span>
                                            <span class="am-icon-pencil-square-o" v-if="!item.isMake"> 未做</span>
                                        </span> -->
                                        <span v-if="page == 'chapter'" @click='feedbackBug(item)' class="bugMenu am-badge am-radius" :data-number="item.type+index" style="cursor:pointer;margin-right:10px; background-color:#fff; color:#666;border:1px solid #ddd;font-weight:normal;">BUG反馈</span>                        
                                        <span v-if="page == 'error'" @click='delError(item.type,index,item.questionId,x)' class="bugMenu am-badge am-radius" :data-number="item.type+index" style="cursor:pointer;margin-right:10px; background-color:#fff; color:#666;border:1px solid #ddd;font-weight:normal;">移除本题</span>                        
                                    </div>
                                    <hr>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
            <div :class="!scrollRight?'err_right':'err_right_scroll err_right'" :style='rightStyle'>
                <div class="err_answer_borad peter-answerSheet-title">答题卡
                    <small class="am-text-warning peter-answerSheet-title-num">
                        <span id="peter-answerSheet-done-num">{{num}}</span> / 
                        <span id="peter-answerSheet-total-num">{{allNum}}</span>
                    </small>
                </div>
                <div id='peter-answerSheet-wrap' class='list-no am-container'>
                    <template v-for='(item,index) in newExamList'>
                        <div :key='index' v-if='item.data.length'>
                            <div class="peter-answerSheet-title" style="height: 45px; line-height: 45px;">
                                <span class="am-icon-ellipsis-v am-text-danger">&nbsp;{{item.questionTypes}}
                                    <span style="color:#666;font-size:12px;">&nbsp;(共{{item.data.length}}题)</span>
                                </span>
                            </div>
                            <span v-anchor='{type:item.type,index:num}' id='' :class="val.isMake?'peter-answerSheet-item am-badge-warning already-done right_item_active':'peter-answerSheet-item already-done right_item'" type='button' 
                            v-for='(val,num) in item.data' :key="'right'+num">{{num+1}}</span>
                        </div>
                    </template>
                </div>
            </div>
        </div>
</template>

<script>
    import EventBus from '../../utils/eventBus';
    import analysisDialog from '@/components/analysisDialog.vue';
    export default{
        data(){
            return{
                // 试题数据
                // examData:null,
                showNoDate:false,
                // 试题列表
                newExamList:[],
                examList:[],
                //是否可以保存进度或者保存错题
                judgeBool:false,
                // 右边的样式
                rightStyle:{
                    left:($(window).width()-1200)/2 + 945 +'px'
                },
                // 页面宽度
                screenWidth:$(window).width(),
                // 向左滑动的距离
                scrollLeft:document.documentElement.scrollLeft,
                // 判断是否还有数据的计数器
                delCounter:0,
                // bug反馈显示
                analysisDialogVisible:false,
                // bug反馈题目
                bugQuestion:null,
                reg : /<[^>]*>[\s]*<\/[^>]*>/g
            }
        },
        components:{
            analysisDialog
        },
        // 传过来的试题列表，右侧试卷卡固定，哪一个页面
        props:['scrollRight','page','examData'],
        created(){
            for(let val in this.examData){
                this.examList = this.examList.concat(this.examData[val])
            }
            this.alterData();
        },
        // 锚点连接的自定义指令
        directives:{
            anchor:{
                bind(el,binding){
                    el.onclick = function(){
                        $(document.documentElement).animate({
                                scrollTop:$('#anchor-'+binding.value.type+'-'+binding.value.index).offset().top
                            },500)
                    }
                }
            }
        },
        destroyed () { //离开这个界面之后，删除，不然会有问题
            window.removeEventListener('scroll', this.handleScroll)
        },
        methods:{
            // 关闭bug反馈dialog
            closeAnalysisDialog(){
                this.analysisDialogVisible = false;
            },
            // 页面滚动
            handleScroll(e){
                this.scrollLeft = document.documentElement.scrollLeft;
                if(this.scrollRight){
                    if(this.screenWidth < 1200 || this.screenWidth == 1200){
                        this.rightStyle = {
                            left:945-this.scrollLeft+'px'
                        }
                    }else if(this.screenWidth > 1200){
                        this.rightStyle = {
                            left:(this.screenWidth-1200)/2 + 945 + 'px'
                        }
                    }
                }else{
                    this.rightStyle = {}
                }
            },
            //修改原始数据
            alterData(){
                if(this.examList.length == 0 ){
                    this.showNoDate = true
                    return;
                }
                for(let value in this.examData){
                    let obj = {};
                    obj.type = '';
                    obj.data = this.examData[value];
                    if(this.examData[value].length > 0){
                        obj.type = this.examData[value][0].type;
                        obj.data.forEach((item,index)=>{
                            if(this.page == 'collect'){
                                item.isCollection = true;
                            }
                            this.delCounter++;
                            item.showAnswer = false;
                            item.answer = [];
                            item.isMake = false;
                            item.options.forEach((val,num)=>{
                                val.check = false;
                                if(val.isCorrect){
                                    item.answer.push(val.optionName);
                                }
                            })
                            if(item.userAnswer){
                                item.isMake = true;
                                item.userAnswer.split(',').forEach((ans)=>{
                                    item.options.forEach((val,num)=>{
                                        if(ans == val.optionName){
                                            val.check = true
                                        }
                                    })
                                })
                                this.judgeBool = true;
                                this.$emit('judge',this.judgeBool);
                                EventBus.$on('getPlanData',this.getSaveData)
                            }
                            if(item.type > 3){
                                item.children.forEach(val=>{
                                    val.title = this.regBlank(val.title);
                                    val.showAnswer = false;
                                })
                            }
                        })
                    }
                    switch(value){
                        case 'radio':
                            obj.questionTypes = '单选题';
                            obj.typesIntro = '每小题只有一个正确答案，请从每小题的备选答案中选出一个你认为最正确的答案，用鼠标点击相应的选项。';
                            break;
                        case 'multiples':
                            obj.questionTypes = '多选题';
                            obj.typesIntro = '每小题均有两个以上的正确答案，请从每小题的备选答案中选出你认为正确的答案，用鼠标点击相应的选项。每小题所有答案选择正确的得分，不答、错答、漏答均不得分。';
                            break;
                        case 'indefinite':
                            obj.questionTypes = '不定项选择题';
                            obj.typesIntro = '每小题至少有一个正确答案，请从每小题的备选答案中选出你认为正确的答案，用鼠标点击相应的选项。每小题所有答案选择正确的得分，不答、错答、漏答均不得分。';
                            break;
                        case 'judgments':
                            obj.questionTypes = '判断题';
                            obj.typesIntro = '请判断每小题的表述是否正确。';
                            break;
                        case 'showAnswers':
                            obj.questionTypes = '简答题';
                            obj.typesIntro = '其中一道小题可以选用中文或英文解答，请仔细阅读答题要求。如使用英文解答，须全部使用英文，答题正确的，增加5分。';
                            break;
                        case 'calculations':
                            obj.questionTypes = '计算分析题';
                            obj.typesIntro = '其中一道小题可以选用中文或英文解答，请仔细阅读答题要求。如使用英文解答，须全部使用英文，答题正确的，增加5分。涉及计算的，要求列出计算步骤，否则不得分，除非题目特别说明不需要列出计算过程。';
                            break;
                        case 'comprehensives':
                            obj.questionTypes = '综合题';
                            obj.typesIntro = '涉及计算的，要求列出计算步骤，否则不得分，除非题目特别说明不需要列出计算过程。';
                            break;
                        case 'calculationAnswers':
                            obj.questionTypes = '计算问答题';
                            obj.typesIntro = '涉及计算的，要求列出计算步骤，否则不得分，除非题目特别说明不需要列出计算过程。';
                            break;
                        case 'caseStudies':
                            obj.questionTypes = '案例分析题';
                            obj.typesIntro = '其中一道小题可以选用中文或英文解答，请仔细阅读答题要求。如使用英文解答，须全部使用英文，答题正确的，增加5分。';
                            break;
                        default:
                            break;

                    }
                    this.newExamList.push(obj);
                }
            },
            // 处理空标签
            regBlank(str){
                str = str.replace(this.reg,"")
                if(this.reg.test(str)){        
                    regBlank(str)
                }else{
                    return str  
                }
            },
            // 显示答案按钮
            showAnswer(type,index,num,i){
                let obj = this.newExamList[i];
                if(type < 4){
                    obj.data[index].showAnswer = !obj.data[index].showAnswer;
                }else{
                    obj.data[index].children[num].showAnswer = !obj.data[index].children[num].showAnswer;
                }
                this.newExamList.splice(i,1,obj);
            },
            // 收藏按钮
            collectQuestion(type,index,id,i){
                this.$post(`/api/v1/question/${id}/collection`)
                .then(res=>{
                    if(res.code == 200){
                        this.$message({
                            message: res.data,
                            type: 'success'
                        });
                        let obj = this.newExamList[i];
                        if(this.page == 'collect'){
                            obj.data.splice(index,1);
                            this.delCounter--;
                        }else{
                            obj.data[index].isCollection = !obj.data[index].isCollection;
                        }
                        this.newExamList.splice(i,1,obj);
                    }else{
                        this.$message.error(res.msg);
                    }
                })
            },
            // 移除错题
            delError(type,index,id,i){
                this.$patch(`/api/v1/wrong_questions/${id}`).then(res=>{
                    if(res.code == 200){
                        this.$message({
                            type:'success',
                            message: '移除成功',
                        })
                        let obj = this.newExamList[i];
                        obj.data.splice(index,1);
                        this.newExamList.splice(i,1,obj)
                        this.delCounter--;
                    }else{
                        this.$message.error(res.msg)
                    }
                })
            },
            // 点击选项
            clickItemHandle(type,index,num,i){
                let obj = this.newExamList[i];
                this.judgeBool = false;
                if(type == '0' || type == '3'){
                    obj.data[index].isMake = true;
                    obj.data[index].options.forEach((item,number)=>{
                        if(number == num){
                            item.check = true;
                        }else{
                            item.check = false;
                        }
                    })
                    this.judgeBool = true;
                }else if(type == '1' || type == '2'){
                    obj.data[index].options[num].check = !obj.data[index].options[num].check;
                    obj.data[index].isMake = false;
                    for(let p =0 ;p<obj.data[index].options.length;p++){
                        if(obj.data[index].options[p].check){
                            obj.data[index].isMake = true;
                            this.judgeBool = true;
                            break;
                        }
                    }
                }
                this.newExamList.splice(i,1,obj);
                if(type != '0' && type != '3' && !this.judgeBool){
                    this.newExamList.forEach(item=>{
                        if(item.type == '1' || item.type == '2'){
                            item.data.forEach(val=>{
                                if(val.isMake){
                                    this.judgeBool = true;
                                }
                            })
                        }
                    })
                }
                this.judgeIsDo();
            },
            // 标记已做
            makeQuestion(type,index,id,i){
                let obj = this.newExamList[i];
                obj.data[index].isMake = !obj.data[index].isMake;
                this.newExamList.splice(i,1,obj);
            },
            // 判断是否可以进行保存进度和错题
            judgeIsDo(){
                this.$emit('judge',this.judgeBool);
                if(this.judgeBool){
                    EventBus.$on('getPlanData',this.getSaveData)
                }
            },
            // 获取保存进度的数据
            getSaveData(){
                let arr = [];
                this.newExamList.forEach(item=>{
                    item.data.forEach(val=>{
                        if(val.isMake){
                            let answers = [];
                            val.options.forEach(v=>{
                                if(v.check){
                                    answers.push(v.optionName);
                                }
                            })
                            arr.push({questionId:val.questionId,answers})
                        }
                    })
                })
                if(arr.length == 0){
                    this.$emit('getData',null)
                }else{
                    this.$emit('getData',arr)
                }
            },
            // 反馈bug
            feedbackBug(item){
                this.analysisDialogVisible = true;
                this.bugQuestion = item
            }
        },
        computed:{
            // 计算一共做了多少题
            num:function(val){
                let i = 0;
                this.newExamList.forEach(item=>{
                    item.data.forEach(val=>{
                        if(val.isMake){
                            i++;
                        }
                    })
                })
                return i;
            },
            //总题数
            allNum:function(val){
                if(this.newExamList.length > 4){
                    return this.newExamList[0].data.length + this.newExamList[1].data.length + this.newExamList[2].data.length + this.newExamList[3].data.length;
                }else{
                    return 0
                }
            }
        },
        mounted(){
            window.addEventListener('scroll', this.handleScroll, true);
            $(window).resize(()=>{
                this.screenWidth = $(window).width();
                if(this.scrollRight){
                    if(this.screenWidth < 1200 || this.screenWidth == 1200){
                        this.rightStyle = {
                            left:945-this.scrollLeft+'px'
                        }
                    }else if(this.screenWidth > 1200){
                        this.rightStyle = {
                            left:(this.screenWidth-1200)/2 + 945+'px'
                        }
                    }
                }
            })
        },
        watch:{
            delCounter(val){
                if(val == 0){
                    this.showNoDate = true
                }
            }
        }
    }
</script>
 
 

<style lang='scss' scoped>
    .main{
            width:1200px;
            margin:0 auto;
            clear: both;
            overflow: hidden;
            position: relative;
            .err_left {
                width: 940px;
                float: left;
                .err_main {
                    padding: 30px;
                    background: #fff;
                    border: 1px solid #e0e3e9;
                    border-radius: 3px;
                    margin-top: 5px;
                    .err_main_detail {
                        padding: 20px;
                        border: 1px solid #ddd;
                        border-radius: 3px;
                        .err_parse{
                            display: block;
                        }
                        .err_parse_hidden{
                            display: none;
                        }
                    }
                }
                .rs-ex-analysis{
                    margin-bottom:1.5em;
                    overflow:hidden;
                }
                .look-result-right{
                    float: right;
                }
            }
            .err_right{
                margin-top: 5px;
                width: 255px;
                border: 1px solid #e0e3e9;
                border-radius: 3px;
                background-color: #fff;
                float: right;
                .err_answer_borad {
                    height: 3.5rem;
                    line-height: 3.5rem;
                    text-indent: 10px;
                    background: #f9f9f9;
                }
                .am-container{
                    display: block;
                    padding: 5px 13px 20px;
                    max-height: 873px;
                    position: relative;
                    overflow-y: auto;
                    .right_item{
                        display: inline-block;
                        cursor: pointer;
                        margin: 0px 2px 3px 0px;
                        border-radius: 3px;
                        font-family: Arial;
                        font-size: 14px;
                        height: 30px;
                        line-height: 30px;
                        outline: none medium;
                        text-align: center;
                        width: 30px;
                        border: 1px solid rgb(230, 232, 236);
                        color: #000;
                        &:hover{
                            background-color:#dd514c;
                            color:#fff
                        }
                    }
                    .right_item_active{
                        display: inline-block;
                        cursor: pointer;
                        margin: 0px 2px 3px 0px;
                        border-radius: 3px;
                        font-family: Arial;
                        font-size: 14px;
                        height: 30px;
                        line-height: 30px;
                        outline: none medium;
                        text-align: center;
                        width: 30px;
                        border: 1px solid rgb(230, 232, 236);
                        color: rgb(255, 255, 255);
                    }
                }
            }
            .err_right_scroll{
                position: fixed;
                top:10px;
            }
        }
</style>
